<template>
  <div class="aps-smy-container">
    <div class="main">
      <div class="panel">
        <!-- 左侧：预览区域 -->
        <div class="preview-section">
          <!-- 设备状态与快速操作  -->
          <div class="quick-actions preview-top-panel">
            <div class="panel-header">
              <a-icon type="control" />
              <span>设备状态与快速操作</span>
            </div>
            <div class="device-operation-row">
              <!-- 设备状态信息 -->
              <div class="device-status">
                <a-tag :color="isConnected ? 'green' : 'red'">
                  {{ isConnected ? '已连接' : '未连接' }}
                </a-tag>
                <span class="status-message">{{ statusMessage }}</span>
                <span class="device-name" v-if="isConnected">
                  <a-icon type="printer" /> {{ deviceName }} {{ serialNumber }}
                </span>
              </div>

              <!-- 操作按钮组 -->
              <div class="action-buttons-row">
                <a-button
                  type="primary"
                  @click="handleScan"
                  :loading="scanning"
                  :disabled="!isConnected"
                >
                  <a-icon type="scan" /> 开始扫描
                </a-button>

                <a-button
                  @click="handleConnect"
                  :disabled="isConnected || connecting"
                  :loading="connecting"
                >
                  <a-icon type="link" />
                  {{ isConnected ? '已连接' : '连接设备' }}
                </a-button>

                <a-button
                  type="danger"
                  ghost
                  @click="handleDisconnect"
                  :disabled="!isConnected"
                >
                  <a-icon type="disconnect" /> 断开连接
                </a-button>
                <a-button type="primary">
                  <a-icon type="scan" /> 差扫
                </a-button>
                <a-button type="primary">
                  <a-icon type="scan" /> 替扫
                </a-button>
                <a-button type="primary" @click="showLogModal">
                  <a-icon type="profile" /> 日志
                </a-button>
              </div>
            </div>
          </div>

          <div class="preview-content">
            <div
              v-if="previewFiles.length > 0"
              class="preview-container preview-horizontal scanner-style"
            >
              <!-- 左侧图片缩略图区域 -->
              <template v-if="fileFormat == 1">
                <div class="thumbnails-section thumbnails-vertical">
                  <div class="thumbnail-list thumbnail-list-vertical">
                    <div
                      v-for="(file, index) in previewFiles"
                      :key="index"
                      class="thumbnail-item"
                      :class="{ 'active-thumbnail': currentPreview === index }"
                      @click="currentPreview = index"
                    >
                      <div class="thumbnail-number">{{ file.name }}</div>
                      <img
                        class="thumbnail-image"
                        v-if="file.url"
                        :src="file.url"
                        alt="缩略图"
                      />
                    </div>
                  </div>

                  <div class="thumbnail-controls">
                    <a-button-group class="full-width-controls">
                      <a-button
                        size="small"
                        @click="moveImage('up')"
                        :disabled="currentPreview === 0"
                        style="min-width: 48px"
                      >
                        上移
                      </a-button>
                      <a-button
                        size="small"
                        @click="moveImage('down')"
                        :disabled="currentPreview === previewFiles.length - 1"
                        style="min-width: 48px"
                      >
                        下移
                      </a-button>
                      <a-button
                        size="small"
                        type="danger"
                        @click="deleteFile(currentPreview)"
                        style="min-width: 48px"
                      >
                        删除
                      </a-button>
                      <a-button
                        size="small"
                        type="danger"
                        @click="handleClear"
                        style="min-width: 48px"
                      >
                        清空
                      </a-button>
                    </a-button-group>
                  </div>
                </div>

                <!-- 右侧图片预览区（单张大图） -->
                <div class="preview-large-image">
                  <img
                    v-if="previewFiles[currentPreview]?.url"
                    :src="previewFiles[currentPreview]?.url"
                    alt="扫描预览"
                  />
                </div>
              </template>
              <!-- 左侧PDF缩略图区域 -->
              <template v-if="fileFormat == 4">
                <div class="thumbnails-section thumbnails-vertical">
                  <div class="thumbnail-list thumbnail-list-vertical">
                    <div
                      v-for="(file, index) in previewFiles"
                      :key="index"
                      class="thumbnail-item"
                      :class="{ 'active-thumbnail': currentPreview === index }"
                      @click="currentPreview = index"
                    >
                      <div class="thumbnail-number">{{ file.name }}</div>
                      <iframe
                        class="thumbnail-image"
                        v-if="file.url"
                        :src="file.url"
                        style="width: 100%; height: 100%"
                      ></iframe>
                    </div>
                  </div>

                  <div class="thumbnail-controls">
                    <a-button-group class="full-width-controls">
                      <a-button
                        size="small"
                        @click="moveImage('up')"
                        :disabled="currentPreview === 0"
                        style="min-width: 48px"
                      >
                        上移
                      </a-button>
                      <a-button
                        size="small"
                        @click="moveImage('down')"
                        :disabled="currentPreview === previewFiles.length - 1"
                        style="min-width: 48px"
                      >
                        下移
                      </a-button>
                      <a-button
                        size="small"
                        type="danger"
                        @click="deleteFile(currentPreview)"
                        style="min-width: 48px"
                      >
                        删除
                      </a-button>
                      <a-button
                        size="small"
                        type="danger"
                        @click="handleClear"
                        style="min-width: 48px"
                      >
                        清空
                      </a-button>
                    </a-button-group>
                  </div>
                </div>

                <!-- 右侧图片预览区（单张大图） -->
                <div class="preview-large-image">
                  <iframe
                    v-if="previewFiles[currentPreview]?.url"
                    :src="previewFiles[currentPreview]?.url"
                    style="width: 100%; height: 100%"
                  ></iframe>
                </div>
              </template>
            </div>
            <div v-else class="preview-placeholder">
              <a-empty description="暂无扫描文档" />
              <p>请点击"开始扫描"按钮扫描文档</p>
            </div>
          </div>
        </div>

        <!-- 右侧：配置和操作区域 -->
        <div class="control-section">
          <!-- 快速操作面板已移到左侧上方 -->

          <!-- 扫描配置面板 -->
          <div class="scanner-config">
            <div class="panel-header">
              <a-icon type="setting" />
              <span>扫描参数配置</span>
            </div>

            <div class="config-grid">
              <div class="config-group">
                <div class="group-title">基本设置</div>
                <div class="config-row">
                  <div class="config-item">
                    <span class="label">扫描仪型号:</span>
                    <a-select v-model="deviceName" size="small">
                      <a-select-option value="DS-530II"
                        >DS-530II</a-select-option
                      >
                    </a-select>
                  </div>
                  <div class="config-item">
                    <span class="label">文档来源:</span>
                    <a-select v-model="docSource" size="small">
                      <a-select-option :value="-1">自动</a-select-option>
                      <a-select-option :value="0">平板扫描</a-select-option>
                      <a-select-option :value="1">进纸器单面</a-select-option>
                      <a-select-option :value="2">进纸器双面</a-select-option>
                    </a-select>
                  </div>
                </div>
                <div class="config-row">
                  <div class="config-item">
                    <span class="label">分辨率:</span>
                    <a-select v-model="resolution" size="small">
                      <a-select-option :value="100">100 DPI</a-select-option>
                      <a-select-option :value="200">200 DPI</a-select-option>
                      <a-select-option :value="300">300 DPI</a-select-option>
                      <a-select-option :value="600">600 DPI</a-select-option>
                    </a-select>
                  </div>
                  <div class="config-item">
                    <span class="label">纸张大小:</span>
                    <a-select v-model="docSize" size="small">
                      <a-select-option :value="-1">自动</a-select-option>
                      <a-select-option :value="2">A4</a-select-option>
                      <a-select-option :value="3">A5</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>

              <div class="config-group">
                <div class="group-title">图像设置</div>
                <div class="config-row">
                  <div class="config-item">
                    <span class="label">图片类型:</span>
                    <a-select v-model="imageType" size="small">
                      <a-select-option :value="-1">自动</a-select-option>
                      <a-select-option :value="0">彩色</a-select-option>
                      <a-select-option :value="1">灰度</a-select-option>
                      <a-select-option :value="2">黑白</a-select-option>
                    </a-select>
                  </div>
                  <div class="config-item">
                    <span class="label">文件格式:</span>
                    <a-select v-model="fileFormat" size="small">
                      <!-- <a-select-option :value="0">BMP</a-select-option> -->
                      <a-select-option :value="1">JPG</a-select-option>
                      <!-- <a-select-option :value="2">TIFF</a-select-option>
                      <a-select-option :value="3">多页TIFF</a-select-option> -->
                      <a-select-option :value="4">PDF</a-select-option>
                    </a-select>
                  </div>
                </div>
                <div class="config-row">
                  <div class="config-item">
                    <span class="label">保存目标:</span>
                    <a-select v-model="destination" size="small">
                      <a-select-option :value="0">Base64</a-select-option>
                      <a-select-option :value="1">文件</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 文档操作面板 -->
          <div class="document-operations">
            <div class="panel-header">
              <a-icon type="file" />
              <span>文档操作</span>
            </div>

            <div class="operation-buttons">
              <div class="button-row">
                <a-button @click="handleSave" :disabled="!scanCompleted">
                  <a-icon type="save" /> 保存文件
                </a-button>

                <a-button
                  type="primary"
                  ghost
                  @click="handleSubmitData"
                  :disabled="!filesSaved"
                  :loading="submitting"
                >
                  <a-icon type="cloud-upload" /> 提交数据
                </a-button>
              </div>

              <a-button
                type="danger"
                ghost
                @click="handleClear"
                :disabled="previewFiles.length === 0"
              >
                <a-icon type="delete" /> 清除所有文件
              </a-button>
            </div>
            <div v-if="scanCompleted && filePath">
              <div>filePath: {{ filePath }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <logging ref="logging" :visible="logModalVisible" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Logging from '../components/logging/logging.vue';
import {
  ESL_CONSTANTS,
  createScanner,
  scanDocument,
  ERROR_CODE,
} from '../utils/EpsonScanSDK';
import { flatMap } from 'lodash';

@Component({
  name: 'ApsSmy',
  components: {
    Logging,
  },
})
export default class ApsSmy extends Vue {
  // 扫描仪对象
  eslObj: any = null; // 修改为初始值为null

  // 扫描仪状态
  isConnected: boolean = false; // 是否连接
  connecting: boolean = false; // 连接中
  scanning: boolean = false; // 扫描中
  scanCompleted: boolean = false; // 扫描完成
  statusMessage: string = '请连接扫描仪'; // 状态消息

  // 扫描参数
  serialNumber: string = ''; // 序列号
  deviceName: string = 'DS-530II'; // 设备名称
  imageType: number = -1; // IT_AUTO 自动
  docSource: number = -1; // SRC_AUTO 自动
  resolution: number = 300; // 分辨率
  docSize: number = -1; // DS_AUTO 自动

  // 保存参数
  destination: number = 0; // DEST_BASE64 保存为base64
  fileFormat: number = 1; // FF_PDF 保存为pdf
  current_count: number = 0; // 当前扫描的文件数量

  // 预览文件 - 实际扫描时会被替换
  previewFiles: Array<{
    name: string;
    url?: string;
    href?: string;
    size?: string;
    type: string;
  }> = []; // 预览文件

  // 当前预览的文件索引
  currentPreview: number = 0;

  // 扫描设置
  scanSettings = {
    resolution: 300,
    colorMode: 'color',
    fileFormat: 'pdf',
    paperSize: 'a4',
    duplex: false,
  };

  // 文件已保存状态
  filesSaved: boolean = false;

  // 文件路径
  filePath: string = '';

  // 数据提交中状态
  submitting: boolean = false;

  // 添加日志模态框显示控制属性
  logModalVisible: boolean = false;

  // 根据文件类型获取图标
  getFileIcon(type: string): string {
    const iconMap: { [key: string]: string } = {
      pdf: 'file-pdf',
      jpg: 'file-jpg',
      jpeg: 'file-jpg',
      png: 'file-image',
      tiff: 'file-image',
      bmp: 'file-image',
    };
    return iconMap[type.toLowerCase()] || 'file';
  }

  // 删除文件
  deleteFile(index: number) {
    this.previewFiles.splice(index, 1);
    if (this.previewFiles.length === 0) {
      this.currentPreview = 0;
      this.scanCompleted = false;
    } else if (this.currentPreview >= this.previewFiles.length) {
      this.currentPreview = this.previewFiles.length - 1;
    }
  }

  // 修改writeLog方法以支持增强型日志
  writeLog(message: string, type: string = 'info') {
    // 生成时间戳
    const logging = this.$refs.logging as Logging;
    logging?.addLog(message, type as 'info' | 'warning' | 'error' | 'success');
  }

  // 显示文件
  viewFile(base64: string) {
    let fileName;
    let fileType;
    if (base64) {
      switch (this.fileFormat) {
        case 0: // FF_BMP
          fileName = '文档_' + this.current_count + '.bmp';
          fileType = 'bmp';
          break;
        case 1: // FF_JPEG
          fileName = '文档_' + this.current_count + '.jpg';
          fileType = 'jpg';
          break;
        case 2: // FF_TIFF
        case 3: // FF_MULTITIFF
          fileName = '文档_' + this.current_count + '.tif';
          fileType = 'tiff';
          break;
        case 4: // FF_PDF
          fileName = '文档_' + this.current_count + '.pdf';
          fileType = 'pdf';
          break;
        default:
          fileName = '文档_' + this.current_count;
          fileType = 'unknown';
      }

      let dataUrl = '';
      if (fileType === 'pdf') {
        dataUrl = 'data:application/pdf;base64,' + base64;
      } else {
        dataUrl = 'data:image/' + fileType + ';base64,' + base64;
      }

      this.previewFiles.push({
        name: fileName,
        url: dataUrl,
        type: fileType,
      });

      this.current_count += 1;
      this.currentPreview = this.previewFiles.length - 1;

      console.log(
        '🚀 ~ ApsSmy ~ viewFile ~ this.previewFiles:',
        this.previewFiles,
      );
    }
  }

  // 显示文件路径
  printFilePath(filePath: string) {
    // 从路径中提取文件名和类型
    const fileName = filePath.split('\\').pop() || 'unknown.file';
    const fileExt = fileName.split('.').pop() || '';
    this.filePath = filePath;
    this.filesSaved = true;
    this.statusMessage = '文件已保存到: ' + filePath;
    this.writeLog('文件已保存到: ' + filePath);
  }

  // 连接扫描仪
  handleConnect() {
    this.connecting = true;
    this.statusMessage = '正在连接...';
    this.writeLog('正在连接扫描仪...', 'info');

    const params = {
      deviceName: this.deviceName,
      connectType: 0,
    };

    this.eslObj.Open(params, (isSuccess: boolean, result: any) => {
      this.connecting = false;

      if (isSuccess) {
        this.writeLog('连接成功');
        this.isConnected = true;
        this.statusMessage = '连接成功';
        // 获取扫描仪信息
        this.eslObj.GetInfo((success: boolean, info: any) => {
          if (success) {
            this.writeLog('获取信息成功');
            if (info.serialNumber) {
              this.serialNumber = info.serialNumber;
              this.writeLog('序列号: ' + info.serialNumber);
            }
          } else {
            this.writeLog('获取信息失败');
            this.statusMessage = '获取信息失败';
          }
        });
      } else {
        this.writeLog('连接失败');
        this.statusMessage = '连接失败';
      }
    });
  }

  // 断开连接
  handleDisconnect() {
    this.eslObj.Close((isSuccess: boolean, result: any) => {
      if (isSuccess) {
        this.writeLog('关闭连接成功');
        this.isConnected = false;
        this.scanCompleted = false;
        this.statusMessage = '已断开连接';
      } else {
        this.writeLog('关闭连接失败');
      }
    });
  }

  // 开始扫描
  handleScan() {
    if (!this.isConnected) {
      this.$message.warning('请先连接扫描仪');
      this.writeLog('请先连接扫描仪', 'warning');
      return;
    }

    this.scanning = true;
    this.statusMessage = '扫描中...';
    this.writeLog('开始扫描...', 'info');

    const params = {
      docSource: this.docSource,
      imgType: this.imageType,
      resolution: this.resolution,
      docSize: this.docSize,
      docRotate: ESL_CONSTANTS.DR_NONE,
      brightness: 0,
      contrast: 0,
      threshold: 126,
      colorFilter: ESL_CONSTANTS.CF_NONE,
      numScan: 0, // 全部扫描
      docEnhance: 0,
      imgFilter: 0,
      optDoubleFeedDetect: ESL_CONSTANTS.DFD_NONE,
      optBlankPageSkip: ESL_CONSTANTS.BPS_NONE,
      skewCorrect: ESL_CONSTANTS.SC_EDGE,
      optPunchHoleRemove: ESL_CONSTANTS.PHR_ON,
    };
    if (this.destination === 1) {
      this.eslObj.Scan(params, (isSuccess: boolean, result: any) => {
        if (isSuccess) {
          if (result.eventType === ESL_CONSTANTS.EVENT_SCANPAGE_COMPLETE) {
            this.writeLog('正在扫描页面 ' + result.page);
          }
          if (result.eventType === ESL_CONSTANTS.EVENT_ALLSCAN_COMPLETE) {
            this.writeLog('所有扫描完成', result);
            this.scanCompleted = true;
            this.scanning = false;
            this.statusMessage = '文件扫描完成';
            this.$message.success('文件扫描完成');
          }
        } else {
          this.writeLog('扫描请求失败');
          console.log('扫描请求失败', result);
          this.scanning = false;
          this.scanCompleted = false;
          this.statusMessage = ERROR_CODE[result.errorCode];
          this.$message.error(ERROR_CODE[result.errorCode]);
        }
      });
    } else {
      this.eslObj.ScanAndSave_Simple(
        {
          deviceName: this.deviceName,
          connectType: 0,
        },
        params,
        {
          destination: ESL_CONSTANTS.DEST_BASE64,
          fileFormat: this.fileFormat,
        },
        (isSuccess: boolean, result: any) => {
          if (isSuccess) {
            if (result.eventType == ESL_CONSTANTS.EVENT_SCANPAGE_COMPLETE) {
              this.writeLog('scan page complete' + result.page, 'info');
              console.log(
                '🚀 ~ ApsSmy ~ handleScan ~ result.eventType == ESL_CONSTANTS.EVENT_SCANPAGE_COMPLETE:',
                result,
              );
            }
            if (result.eventType == ESL_CONSTANTS.EVENT_ALLSCAN_COMPLETE) {
              this.writeLog('all scan page complete' + result.page, 'info');
              console.log(
                '🚀 ~ ApsSmy ~ handleScan ~ result.eventType == ESL_CONSTANTS.EVENT_ALLSCAN_COMPLETE:',
                result,
              );
            }
            if (result.eventType == ESL_CONSTANTS.EVENT_SAVEPAGE_COMPLETE) {
              this.viewFile(result.base64);
              this.scanCompleted = true;
              this.scanning = false;
              this.statusMessage = '扫描完成';
              // this.$message.success('扫描和保存成功');
            }
            if (result.eventType == ESL_CONSTANTS.EVENT_ALLSAVE_COMPLETE) {
              console.log(
                '🚀 ~ ApsSmy ~ handleScan ~ result.eventType == ESL_CONSTANTS.EVENT_ALLSAVE_COMPLETE:',
                result,
              );
              this.writeLog('all save page complete');
            }
          } else {
            this.writeLog('扫描和保存失败');
            console.log('扫描和保存失败', result);
            this.scanCompleted = false;
            this.scanning = false;
            this.statusMessage = ERROR_CODE[result.errorCode];
            this.$message.error(ERROR_CODE[result.errorCode]);
          }
        },
      );
    }
  }

  // 保存文件
  handleSave() {
    if (!this.scanCompleted) {
      this.$message.warning('请先完成扫描');
      return;
    }

    this.statusMessage = '保存中...';
    this.writeLog('正在保存文件...', 'info');


    const params: any = {
      destination: this.destination,
      fileFormat: this.fileFormat,
      fileTimeFormat: 3,
    };

    if (this.destination === 1) {
      // DEST_FILE
      params.filePath = 'C:\\ProgramData\\epson';
      params.fileNamePrefix = 'TEST';
    }

    if (this.fileFormat === 4) {
      // FF_PDF
      params.addOcrText = 1;
      params.ocrLanguage = 0x10;
    }

    if (this.fileFormat === 1) {
      // FF_JPEG
      params.imgQuality = 80;
    }

    this.eslObj.Save(params, (isSuccess: boolean, result: any) => {
      if (isSuccess) {
        if (result.eventType === ESL_CONSTANTS.EVENT_SAVEPAGE_COMPLETE) {
          this.writeLog('已保存', 'success');
          if (this.destination === 0) {
            // DEST_BASE64
            this.viewFile(result.base64);
          } else {
            this.printFilePath(result.filePath);
          }
        }
        if (result.eventType === ESL_CONSTANTS.EVENT_ALLSAVE_COMPLETE) {
          this.writeLog('所有保存完成', 'success');
          this.$message.success('文件保存成功');
          this.filesSaved = true; // 设置为已保存状态
          this.statusMessage = '文件保存成功';
        }
      } else {
        this.writeLog('保存请求失败', 'error');
        this.$message.error('保存失败');
        this.statusMessage = '保存失败';
        this.filesSaved = false;
      }
    });
  }

  // 清除所有文件
  handleClear() {
    if (this.previewFiles.length === 0) {
      return;
    }
    this.filePath = '';
    this.previewFiles = [];
    this.currentPreview = 0;
    this.scanCompleted = false;
    this.filesSaved = false; // 重置保存状态
    this.statusMessage = '所有文件已清除';
    this.writeLog('所有文件已清除', 'warning');
  }

  // 组件销毁前关闭连接
  beforeDestroy() {
    if (this.isConnected) {
      this.handleDisconnect();
    }
  }

  // 提交数据
  handleSubmitData() {
    if (!this.filesSaved) {
      this.$message.warning('请先保存文件');
      return;
    }

    this.submitting = true;
    this.writeLog('正在提交数据...', 'info');

    // 模拟提交过程
    setTimeout(() => {
      this.submitting = false;
      this.writeLog('数据提交成功', 'success');
      this.$message.success('数据已成功提交');

      // 重置状态
      this.previewFiles = [];
      this.currentPreview = 0;
      this.scanCompleted = false;
      this.filesSaved = false;
    }, 2000);
  }

  // 上移或下移图片
  moveImage(direction: string) {
    if (this.previewFiles.length <= 1) return;

    if (direction === 'up' && this.currentPreview > 0) {
      // 与上面的图片交换位置
      const temp = this.previewFiles[this.currentPreview - 1];
      this.$set(
        this.previewFiles,
        this.currentPreview - 1,
        this.previewFiles[this.currentPreview],
      );
      this.$set(this.previewFiles, this.currentPreview, temp);
      this.currentPreview -= 1;
    } else if (
      direction === 'down' &&
      this.currentPreview < this.previewFiles.length - 1
    ) {
      // 与下面的图片交换位置
      const temp = this.previewFiles[this.currentPreview + 1];
      this.$set(
        this.previewFiles,
        this.currentPreview + 1,
        this.previewFiles[this.currentPreview],
      );
      this.$set(this.previewFiles, this.currentPreview, temp);
      this.currentPreview += 1;
    }
  }

  // 显示日志模态框
  showLogModal() {
    this.logModalVisible = true;
  }

  // 在mounted生命周期中初始化扫描仪对象
  mounted() {
    console.log('mounted createScanner()');
    try {
      this.eslObj = createScanner();
      this.writeLog('扫描SDK已加载');
    } catch (error) {
      console.error('初始化扫描SDK失败:', error);
      this.writeLog('错误: 扫描SDK初始化失败');
    }
  }
}
</script>

<style lang="less" scoped>
.aps-smy-container {
  height: 100%;
  padding: 12px;
  background: #f1f2f6;
}

.main {
  height: 100%;
  background: #fff;
  padding: 12px;
  position: relative;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.panel {
  display: flex;
  height: 100%;
  gap: 12px;
}

// 左侧预览区域
.preview-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  overflow: hidden;
}

.preview-top-panel {
  margin-bottom: 12px;
}

.preview-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px;
  overflow: auto;
  background: #f9f9f9;
}

.preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  &.preview-horizontal {
    flex-direction: row !important;
    gap: 8px;
  }

  &.scanner-style {
    background-color: #f0f0f0;
  }
}

// 大图预览区域
.preview-large-image {
  flex: 1;
  margin-bottom: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;

  img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

// 缩略图区域
.thumbnails-section {
  &.thumbnails-vertical {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: #e6e6e6;
    border-right: 1px solid #ccc;
    padding: 0;
  }
}

.thumbnail-list {
  &.thumbnail-list-vertical {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100% - 40px);
    padding: 5px;
  }
}

.thumbnail-controls {
  border-top: 1px solid #ccc;
  padding: 5px;
  margin-top: auto;
  background-color: #e0e0e0;
  margin-top: 8px;
}

.full-width-controls {
  display: flex;
  width: 100%;
}

.thumbnail-item {
  margin-bottom: 8px;
  position: relative;
  width: 100%;
  height: 120px;
  border: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;

  &.active-thumbnail {
    border: 2px solid #1890ff;
    box-shadow: 0 0 0 1px #1890ff;
  }
}

.thumbnail-number {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #e0e0e0;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: bold;
  border-bottom-right-radius: 4px;
}

.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.preview-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

// 右侧控制区域
.control-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 400px;
  background: #fafafa;
  padding: 12px;
  border-radius: 4px;
  overflow-y: auto;
}

.panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
  color: #333;

  .anticon {
    color: #1890ff;
  }
}

// 快速操作区域
.quick-actions {
  background: white;
  border-bottom: 1px solid #e8e8e8;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.scanner-config,
.document-operations {
  background: white;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.device-operation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.device-status {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  padding: 8px 12px;
  border-radius: 4px;
  flex-shrink: 0;
}

.action-buttons-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.status-message {
  font-size: 13px;
  color: #666;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.device-name {
  font-size: 13px;
  color: #333;
  margin-left: auto;
}

// 按钮相关样式
.button-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;

  .ant-btn {
    flex: 1;
  }
}

.operation-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

// 配置区域样式
.config-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.config-group {
  background: #f9f9f9;
  border-radius: 4px;
  padding: 8px;
}

.group-title {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  margin-bottom: 8px;
}

.config-row {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;

  &:last-child {
    margin-bottom: 0;
  }
}

.config-item {
  flex: 1;

  .label {
    display: block;
    margin-bottom: 4px;
    color: #666;
    font-size: 12px;
  }
}
</style>
